<!--
 * @Author: 会飞的蕉太狼
 * @Date: 2021-10-26 19:20:41
 * @LastEditors: 会飞的蕉太狼
 * @LastEditTime: 2021-10-29 10:05:25
 * @Description: 
-->
<template  :data='tableData'>
  <div class="father">
    <div class="son1">
      <div class="son1Son">
        <img :src="tableData.userFace" alt="图片不见啦" />
      </div>
      <div class="son1Son1">
        <el-button type="text" @click="editHeadPhoto">修改头像</el-button>
      </div>
      <div class="son1Son2">
        <el-button type="text" @click="goBack">返回上一页</el-button>
      </div>
    </div>
    <div class="son2">
      <div>登录用户:{{ tableData.username }}</div>
      <div>用户姓名:{{ tableData.realname }}</div>
      <div>用户手机:{{ tableData.telephone }}</div>
      <div>
        用户性别:
        <span v-if="tableData.gender == 'male'">男</span>
        <span v-else-if="tableData.gender == 'female'">女</span>
        <span v-else>未选择</span>
      </div>
      <div v-if="tableData.roles">用户角色:{{ tableData.roles[0].name }}</div>
      <div>
        用户生日:
        <span v-if="tableData.birth">{{ tableData.birth }}</span>
        <span v-else>暂无</span>
      </div>
      <div>注册时间:{{ tableData.registerTime }}</div>
      <div>
        邮箱:
        <span v-if="tableData.email">{{ tableData.email }}</span>
        <span v-else>暂无</span>
      </div>
      <div>
        状态:
        <el-tag v-if="tableData.status == '正常'" type="success">
          {{ tableData.status }}
        </el-tag>
        <el-tag v-else type="danger">
          {{ tableData.status }}
        </el-tag>
      </div>
      <!-- 修改个人信息按钮 -->
      <el-button type="text" @click="tochange" size="mini"
        >修改个人信息</el-button
      >
    </div>
    <!-- 头像模态框开始  -->
    <el-dialog :title="title" :visible.sync="visibleHead" class="headDialog">
      <el-upload
        v-model="headData.userface"
        class="avatar-uploader"
        action="http://81.69.24.232/pet/jz_upload.php"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleHead = false">取 消</el-button>
        <el-button type="primary" @click="commitHead">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 头像模态框结束 -->
    <!-- 个人信息模态框开始 -->
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="form">
        <el-form-item label="登录用户:" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别:" :label-width="formLabelWidth">
          <el-radio v-model="form.gender" label="male">男</el-radio>
          <el-radio v-model="form.gender" label="female">女</el-radio>
        </el-form-item>
        <el-form-item label="用户手机:" :label-width="formLabelWidth">
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱:" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <div class="block">
          <span class="demonstration">出生日期:</span>
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toCommit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息模态框结束 -->
  </div>
</template>
<script>
import {
  findUserDetailsById,
  saveOrUpdate,
  alterUserface,
} from "../../api/employee";
export default {
  data() {
    return {
      params: {
        id: this.$route.query.id,
      },
      tableData: {},
      form: {},
      formLabelWidth: "120px",
      visible: false,
      visibleHead: false,
      title: "",
      imageUrl: "",
      headData: { userface: "", id: this.$route.query.id },
    };
  },
  methods: {
    // 返回上一个路由
    goBack() {
      this.$router.push({
        path: "/staffMain/index",
      });
    },
    // 去修改头像
    editHeadPhoto() {
      this.visibleHead = true;
      this.title = "修改头像";
    },
    // 去提交头像
    commitHead() {
      alterUserface(this.headData).then(() => {
        findUserDetailsById(this.params).then(
          (res) => (this.tableData = res.data)
        );
        this.$message.success("更新成功");
      });
      this.visibleHead = false;
    },
    // 去修改个人信息
    tochange() {
      this.visible = true;
      this.title = "修改个人信息";
      this.form = { ...this.tableData };
    },
    // 去提交个人信息
    toCommit() {
      saveOrUpdate(this.form).then(() => {
        findUserDetailsById(this.params).then(
          (res) => (this.tableData = res.data)
        );
        this.$message.success("更新成功");
      });
      this.visible = false;
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.headData.userface = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    findUserDetailsById(this.params).then((res) => (this.tableData = res.data));
  },
};
</script>
<style scoped>
.father {
  display: flex;
  flex-direction: column;
}
.son1 {
  height: 120px;
  border-bottom: 2px solid #ebe8e8;
}
.son1Son {
  height: 80px;
  width: 80px;
  margin-top: 10px;
  margin-left: 150px;
  border: 1px solid black;
  border-radius: 100px;
  display: inline-block;
  overflow: hidden;
}
.son1Son1 {
  display: inline-block;
  position: fixed;
  left: 500px;
  top: 100px;
}
.son1Son2 {
  display: inline-block;
  position: fixed;
  right: 100px;
  top: 100px;
}
.son2 {
  display: flex;
  /* background-color: red; */
  height: 500px;
  flex-direction: column;
  justify-content: space-around;
}
img {
  height: 100px;
}
.block {
  margin-left: 50px;
}
.demonstration {
  color: #606266;
  font-weight: bolder;
  margin-right: 10px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.headDialog{
width: 1000px;
}
</style>
